<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>对战投票</title>
    <link rel="stylesheet" type="text/css"
          th:href="@{https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/css/toastr.css}">
    <script type="text/javascript" th:src="@{https://code.jquery.com/jquery-3.3.1.slim.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/jquery-3.6.0.min.js}"></script>
    <script type="text/javascript"
            th:src="@{https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/toastr.js}"></script>
</head>
<style>
    .card {
        border: 0px solid;
    }

    body {
        background-size: 100% 100%;
        background-color: #eee1e1;
        background-repeat: no-repeat;
        height: 900px;
    }

    .table {
        margin: auto;
    }

    .toast-center-center {
        top: 50%;
        left: 50%;
        margin-top: -25px;
        margin-left: -150px;
    }

    .center {
        width: 800px;
    }

    .imgs {
        border-radius: 50%;
        width: 300px;
        height: 300px;
        border: 1px solid #8a8a8a;
    }

    .card {
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>
<body>
<div th:replace="home/index :: navbar"></div>
<div style="padding-top: 150px;display: flex;justify-content: center
" id="main">
    <div>
        <div class="card"
             style="width: 33rem;background-color:#eee1e1;height:500px;display: flex;justify-content: center;align-items: center;">
            <img class="card-img-top imgs" th:src="@{${battlePlayer.playeraImg}}" alt="Card image cap">
            <div class="card-body"
                 style="display: flex;flex-direction:column;justify-content: center;align-items: center;">
                <h3 class="card-title"
                    th:text="${battlePlayer.playeraNumber}+'号-'+${battlePlayer.playeraName}"></h3>
                <p style="font-size: 22px" class="card-text" th:text="${battlePlayer.playeraSong}"></p>
                <button id="voteA"
                        th:if="${battlePlayer.battleStatus}==1"
                        th:onclick="'javascript:voteA(' + ${battlePlayer.playeraId} + ',' + ${battlePlayer.battleId} + ',' + ${battlePlayer.matchId} + ',' + ${session.user.userId} + ');'"
                        class="btn btn-outline-primary btn-lg">为他投票
                    <img id="b11" th:src="@{/img/va.png}"
                         width="30px" height="30px;"
                         style="margin-bottom: 5px">
                </button>
            </div>
        </div>
    </div>

    <div class="center">
        <div style="height:200px;text-align: center;margin-top: 50px">
            <img th:src="@{/img/vs2.png}">
        </div>
        <div style="height:250px; display: flex;justify-content: center;align-items: flex-end">
            <div style="width: 50px;font-size:20px;height: 80px;display: flex;align-items: center;justify-content: center;">
                <span id="tA" th:text="${battlePlayer.playeraTicket}"></span>
            </div>
            <div class="progress" id="progress"
                 style="border-radius: 44px;width: 800px;height: 80px;background-color: #dc3545">
                <div class="progress-bar " id="progressa" role="progressbar" style="width: 50%"
                     aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
                <div class="progress-bar bg-danger" id="progressb" role="progressbar" style="width: 50%"
                     aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
            <div style="width: 50px;height: 80px;font-size:20px;display: flex;align-items: center;justify-content: center;">
                <span id="tB" th:text="${battlePlayer.playerbTicket}"></span>
            </div>

        </div>
    </div>

    <div>
        <div class="card"
             style="width: 33rem;background-color:#eee1e1;height:500px;display: flex;justify-content: center;align-items: center;">
            <img class="card-img-top imgs" th:src="@{${battlePlayer.playerbImg}}" alt="Card image cap">
            <div class="card-body"
                 style="display: flex;flex-direction:column;justify-content: center;align-items: center;">
                <h3 class="card-title"
                    th:text="${battlePlayer.playerbNumber}+'号-'+${battlePlayer.playerbName}"></h3>
                <p style="font-size: 22px" class="card-text" th:text="${battlePlayer.playerbSong}"></p>
                <button id="voteB"
                        th:if="${battlePlayer.battleStatus}==1"
                        th:onclick="'javascript:voteB(' + ${battlePlayer.playerbId} + ',' + ${battlePlayer.battleId} + ',' + ${battlePlayer.matchId} + ',' + ${session.user.userId} + ');'"
                        class="btn btn-outline-danger btn-lg">为他投票
                    <img id="b22" th:src="@{/img/vb.png}"
                         width="30px" height="30px;"
                         style="margin-bottom: 5px">
                </button>
            </div>
        </div>
    </div>
</div>
</body>
<script th:inline="javascript">
    var ticketA = [[${battlePlayer.playeraTicket}]];
    var ticketB = [[${battlePlayer.playerbTicket}]];
    var sumTicket = ticketA + ticketB;
    var percentA = ticketA / sumTicket * 100;
    var percentB = ticketB / sumTicket * 100;
    $('#main').hide();
    $('#main').fadeToggle(4000)
    $('#progressa').animate({width: percentA + '%'}, 2000, "linear");
    $('#progressb').animate({width: percentB + '%'}, 2000, "linear");

    function voteA(playeraId, battleId, matchId, userId) {
        $.ajax({
            url: "/vote",
            type: "POST",
            dataType: "json",
            data: {
                playerId: playeraId,
                battleId: battleId,
                matchId: matchId,
                userId: userId
            },
            success: function (res) {
                if (res.code == 0) {
                    toastr.success('投票成功');
                    var ta = parseInt($('#tA').text());
                    $('#tA').text(ta + 1)
                    sumTicket = sumTicket + 1;
                    ticketA = ticketA + 1;
                    percentA = ticketA / sumTicket * 100;
                    percentB = ticketB / sumTicket * 100;
                    $('#progressa').animate({width: percentA + '%'}, 1000, "linear");
                    $('#progressb').animate({width: percentB + '%'}, 1000, "linear");
                } else if (res.code == 22) {
                    toastr.error(res.msg);
                } else {
                    toastr.error('投票失败');
                }
            }
        })
    }

    function voteB(playerbId, battleId, matchId, userId) {
        $.ajax({
            url: "/vote",
            type: "POST",
            dataType: "json",
            data: {
                playerId: playerbId,
                battleId: battleId,
                matchId: matchId,
                userId: userId
            },
            success: function (res) {
                if (res.code == 0) {
                    toastr.success('投票成功');
                    var tb = parseInt($('#tB').text());
                    $('#tB').text(tb + 1)
                    sumTicket = sumTicket + 1;
                    ticketB = ticketB + 1;
                    percentA = ticketA / sumTicket * 100;
                    percentB = ticketB / sumTicket * 100;
                    $('#progressa').animate({width: percentA + '%'}, 1000, "linear");
                    $('#progressb').animate({width: percentB + '%'}, 1000, "linear");
                } else if (res.code == 22) {
                    toastr.error(res.msg);
                } else {
                    toastr.error('投票失败');
                }
            }
        })
    }

    $(function () {
        toastr.options = {
            closeButton: false,
            debug: false,
            progressBar: true,
            positionClass: "toast-center-center",
            onclick: null,
            showDuration: "300",
            hideDuration: "1000",
            timeOut: "2000",
            extendedTimeOut: "1000",
            showEasing: "swing",
            hideEasing: "linear",
            showMethod: "fadeIn",
            hideMethod: "fadeOut"
        };

        $("#voteA").hover(function () {
            $("#b11").css("content", "url(\"/img/va2.png\")");
        }, function () {
            $("#b11").css("content", "url(\"/img/va.png\")");
        });

        $("#voteB").hover(function () {
            $("#b22").css("content", "url(\"/img/vb2.png\")");
        }, function () {
            $("#b22").css("content", "url(\"/img/vb.png\")");
        });
    })
</script>
</html>